<template>
	<view class="content">
		<view class="headerNav">
			<u-navbar placeholder :border-bottom="false">

			</u-navbar>
		</view>
		<view class="inputBox">
			<view class="textView">
				<text>请先选择所属职位类型</text>
				<text>选择职位信息对应的职业分类</text>
			</view>
			<u-search placeholder="搜索职业类型" v-model="data.keyword" :show-action="false" @search="search"
				@clear="cleared"></u-search>
		</view>

		<view class="bignav" :style="'height:'+ data.height+';width:100%;'">
			<view class="content_main" v-if="data.historyList.length > 0">
				<view class="content_main_tit u-flex u-row-between">
					<view>
						历史搜索
					</view>
					<u-image src="/pages/pagesPersonal/static/trash.jpg" width="42" height="42" mode="widthFix"
						@click="data.isHistory = true"></u-image>
				</view>
				<view class="u-m-t-20 u-flex u-flex-wrap">
					<view class="content_main_item" v-for="(item,index) in data.historyList" :key="index"
						@click="search(item)">
						{{item}}
					</view>
				</view>
			</view>

			<view class="joList">
				<view class="botList" v-for="(item,index) in data.list" :key="index" v-if="!data.isSearch"
					:class="data.isId == item.value? 'active':''" @tap="leftClick(item.value,item.children)">
					<text>{{item.label}}</text>
					<u-icon name="arrow-right" :color="data.isId == item.value? '#00D075':'#867F7F'" size="28"></u-icon>
				</view>
				<view class="botList" v-for="(item,index) in data.searchList" :key="index" v-if="data.isSearch"
					@tap="searchClick(item)">
					<text>{{item.categoryTwoText}}</text>
				</view>
			</view>
		</view>


		<u-modal v-model="data.isHistory" title="系统提示" content="确定清空搜索记录吗" show-cancel-button async-close
			@confirm="onClear"></u-modal>
		<u-popup v-model="data.show" mode="right" width="70%">
			<view class="poplist">
				<view class="botList" v-for="(item,index) in data.childrenlist" :key="index"
					:class="data.isId2 == item.value? 'active':''"
					@tap="leftClick2(item.value,item.children,item.label)">
					<text>{{item.label}}</text>
					<u-icon name="arrow-right" v-if="item.children.length>0"
						:color="data.isId2 == item.value? '#00D075':'#867F7F'" size="28"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="data.show2" mode="right" width="55%">
			<view class="poplist">
				<view class="botList" v-for="(item,index) in data.childrenlist2" :key="index"
					:class="data.isId3 == item.value? 'active':''" @tap="leftClick3(item.value,item.label)">
					<text>{{item.label}}</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue"
	import {
		onReady,
		onShow,
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app'

	const data = reactive({
		height: "",
		keyword: "",
		historyList: [],
		isHistory: false,
		list: [],
		isId: 0,
		show: false,
		show2: false,
		childrenlist: [],
		childrenlist2: [],
		isId2: 0,
		isId3: 0,
		searchList: [],
		isSearch: false

	})
	const cleared = () => {
		data.isSearch = false
	}
	// 搜索
	const search = async (value) => {

		if (uni.$u.test.isEmpty(value)) return uni.$u.toast('搜索内容不能为空')
		saveKeyword(value)
		let params = {
			keyword: value
		}
		// 通过关键字搜索
		let res = await uni.$u.api.searchJobCategory({
			params
		})

		if (res) {
			data.searchList = res
			if (res.length > 0) {
				data.isSearch = true
			} else {
				data.isSearch = false
				uni.$u.toast('没有搜索到任何内容')
			}
		}

	}

	const searchClick = (item) => {

		let isId = 0
		let isId2 = 0
		let isId3 = 0
		let cur = data.list.findIndex(items => {
			return items.label == item.categoryOneText
		})
		if (cur != -1) {
			isId = item.categoryOneId
			isId2 = item.categoryTwoId
			isId3 = 0
		} else {
			for (var i = 0; i < data.list.length; i++) {
				let cur2 = data.list[i].children.findIndex(items => {
					return items.label == item.categoryOneText
				})
				if (cur2 != -1) {
					isId = data.list[i].value
					isId2 = item.categoryOneId
					isId3 = item.categoryTwoId
				}
			}

		}
		let pages = getCurrentPages()
		let prevPage = pages[pages.length - 2]
		// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）

		let category = {
			category1: isId,
			category2: isId2,
			category3: isId3,
			categoryName: item.categoryTwoText
		}
		prevPage.$vm.category = category
		uni.navigateBack()

	}

	//加载历史搜索,自动读取本地Storage
	const getHistoryKeyword = () => {
		let res = uni.getStorageSync('historyKeys')
		if (res) {
			var historyKeys = JSON.parse(res);
			data.historyList = historyKeys;
		}
	}
	//保存关键字到历史记录
	const saveKeyword = (value) => {
		uni.getStorage({
			key: 'historyKeys',
			success: (res) => {
				let historyKeys = JSON.parse(res.data);
				let findIndex = historyKeys.indexOf(value);
				if (findIndex == -1) {
					historyKeys.unshift(value);
				} else {
					historyKeys.splice(findIndex, 1);
					historyKeys.unshift(value);
				}
				//最多10个纪录
				historyKeys.length > 10 && historyKeys.pop();
				uni.setStorageSync('historyKeys', JSON.stringify(historyKeys))
				data.historyList = historyKeys; //更新历史搜索
			},
			fail: (e) => {
				let historyKeys = [value];
				uni.setStorage({
					key: 'historyKeys',
					data: JSON.stringify(historyKeys)
				});
				data.historyList = historyKeys; //更新历史搜索
			}
		})
	}

	// 清空历史记录
	const onClear = () => {
		setTimeout(() => {
			uni.removeStorageSync('historyKeys');
			data.historyList = []
			data.isHistory = false
		}, 1000)
	}

	// 获取字典表数据
	const getClassifyData = async () => {
		let params = {
			type: 'jobcategory'
		}
		let res = await uni.$u.api.getClassifyInfo({
			params
		})
		if (res) {
			data.list = res
			if (data.isId) {
				let cur = res.findIndex(item => {
					return item.value == data.isId
				})
				if (cur != -1) {
					data.childrenlist = res[cur].children
					setTimeout(() => {
						data.show = true
					}, 500)
					if (data.isId3 != 0) {
						let cur2 = data.childrenlist.findIndex(item => {
							return item.value == data.isId2
						})
						if (cur2 != -1) {
							data.childrenlist2 = data.childrenlist[cur2].children
							setTimeout(() => {
								data.show2 = true
							}, 500)
						}
					}
				}
			}
		}

	}

	const leftClick = (id, list) => {
		data.isId = id
		data.isId2 = 0
		data.isId3 = 0
		data.childrenlist = list
		data.show = true
	}
	const leftClick2 = (id, list, name) => {
		data.isId2 = id
		data.isId3 = 0
		data.childrenlist2 = list
		if (list.length > 0) {
			data.show2 = true
		} else {
			let pages = getCurrentPages()
			let prevPage = pages[pages.length - 2]
			// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
			let category = {
				category1: data.isId,
				category2: data.isId2,
				category3: 0,
				categoryName: name
			}
			prevPage.$vm.category = category
			uni.navigateBack()
		}

	}
	const leftClick3 = (id, name) => {
		data.isId3 = id
		let pages = getCurrentPages()
		let prevPage = pages[pages.length - 2]

		let category = {
			category1: data.isId,
			category2: data.isId2,
			category3: data.isId3,
			categoryName: name
		}
		// 返回上一个页面并传参
		prevPage.$vm.category = category
		uni.navigateBack()
	}

	// 获取列表展示高度
	const getHeight = async () => {
		let res = await uni.$u.getRect('.headerNav');
		let res2 = await uni.$u.getRect('.inputBox');
		// #ifdef MP-WEIXIN
		let res3 = await wx.getMenuButtonBoundingClientRect();
		// #endif
		if (res) {

			// #ifdef MP-WEIXIN
			// 获取微信右上角胶囊高度

			data.height = (uni.$u.sys().windowHeight - res.height - res2.height - res3.top) + 'px';
			// #endif

			// #ifndef MP-WEIXIN
			data.height = (uni.$u.sys().windowHeight - res.height - res2.height) + 'px';
			// #endif

		}

	}
	onReady(() => {
		getHeight()
	})
	onLoad(({
		isId,
		isId2,
		isId3
	}) => {
		if (isId) {
			data.isId = isId
			data.isId2 = isId2
			data.isId3 = isId3
		}
		getClassifyData()

	})
	onPageScroll((e) => {
	})
</script>

<style lang="scss" scoped>
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #fff;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;

		.inputBox {
			width: 100%;
			display: flex;
			flex-direction: column;

			.textView {
				color: #867F7F;
				font-size: 26rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;

				text:nth-child(1) {
					color: #000;
					font-size: 36rpx;
					font-weight: bold;
					margin: 20rpx 0;
				}
			}
		}

		&_main {
			width: 100%;

			&_tit {
				padding: 30rpx 0;
				border-bottom-width: 1rpx;
				border-bottom-style: solid;
				border-bottom-color: #bbbbbb;
			}

			&_item {
				background-color: #efefef;
				border-radius: 12rpx;
				padding: 16rpx 30rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				font-size: 26rpx;
				color: #101010
			}

		}

		.joList {
			width: 100%;

			.botList {
				height: 120rpx;
				width: 100%;
				border-bottom: 1rpx solid #ccc;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}


	}

	.active {
		color: #00D075;
	}

	.poplist {
		padding: 200rpx 30rpx 30rpx 30rpx;

		.botList {
			height: 120rpx;
			width: 100%;
			border-bottom: 1rpx solid #ccc;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.bignav {
		overflow-y: scroll;
	}
</style>